<template>
   <el-form
    style="max-width: 60vw"
    label-width="150px"
    class="stepForm"
    size="mini"
    disabled
  >
    <el-card>
      <h3 style="line-height:50px">基础信息</h3>
      <el-form-item label="订单编号：">
        <span>{{ detailObj.orderSn }}</span>
      </el-form-item>
      <el-form-item label="下单时间：">
        <span>{{ new Date(detailObj.addTime).Format('YYYY-MM-DD hh:mm:ss') }}</span>
      </el-form-item>
      <el-form-item label="支付时间：">
        <span>{{ detailObj.payTime ? new Date(detailObj.payTime).Format('YYYY-MM-DD hh:mm:ss') : '-' }}</span>
      </el-form-item>
      <el-form-item label="订单总额：">
        <span>{{ detailObj.orderMoney }}</span>
      </el-form-item>
      <el-form-item label="实付金额：">
        <span>{{ detailObj.paymentMoney }}</span>
      </el-form-item>
      <el-form-item label="支付方式：">
        <span>线下转账</span>
      </el-form-item>     
      <el-form-item label="优惠金额：">
        <span>{{ detailObj.districtMoney }}</span>
      </el-form-item> 
      <el-form-item label="运费：">
        <span>{{ detailObj.shippingMoney }}</span>
      </el-form-item>
      <el-form-item label="下单人：">
        <span>{{ detailObj.payerName }}</span>
      </el-form-item>
      <el-form-item label="发货状态：">
        <span>{{ detailObj.orderLogistics.sendStatus ? '待收货' : '待发货' }}</span>
      </el-form-item>
      <el-form-item label="物流公司：">
        <span>{{ detailObj.orderLogistics.shippingCompName }}</span>
      </el-form-item>
      <el-form-item label="物流单号：">
        <span>{{ detailObj.orderLogistics.shippingSn }}</span>
      </el-form-item>
      <el-form-item label="收货人：">
        <span>{{ detailObj.orderLogistics.consigneeRealname }}</span>
      </el-form-item>
      <el-form-item label="联系电话：">
        <span>{{ detailObj.orderLogistics.consigneeTelphone }}</span>
      </el-form-item>
      <el-form-item label="收货地址：">
        <span>{{
         detailObj.orderLogistics.province +
         detailObj.orderLogistics.city +
         detailObj.orderLogistics.district +
         detailObj.orderLogistics.township +
         detailObj.orderLogistics.address 
         }}</span>
      </el-form-item>
      <el-form-item label="备注：">
        <span>{{ detailObj.buyerRemarks }}</span>
      </el-form-item>
    </el-card>
    <el-card class="mt20">
      <h3 style="line-height:50px">商品信息</h3>
      <el-table
        border
        :data="detailObj.orderItemList"
        tooltip-effect="dark"
        style="width: 100%"
        lazy
        >
        <!-- <el-table-column type="selection" width="40" align="center">
        </el-table-column> -->
        <el-table-column
          prop="productImage"
          label="商品图"
          align="center"
          width="160"
        >
          <template slot-scope="scope">
            <img :src="scope.row.productImage" alt=""/>
          </template>
        </el-table-column>
        <el-table-column prop="productName" label="商品名称" align="center" width="160"></el-table-column>
        <el-table-column prop="skuCode" label="商品编码" align="center" width="160"></el-table-column>
        <el-table-column prop="propertiesValue" label="商品规格" align="center" width="160"></el-table-column>
        <el-table-column prop="productPrice" label="平台售价" align="center" width="160"></el-table-column>
        <el-table-column prop="marketPrice" label="统一零售价" align="center" width="160"></el-table-column>
        <el-table-column prop="costPrice" label="商品供货价" align="center" width="160"></el-table-column>
      </el-table>
    </el-card>
  </el-form>
</template>

<script>
export default {
  
  data() {
    return {
      detailObj: {}
    }
  },
  watch: {
    id(){
      this.getRate();
    },
  },
  beforeMount() {
    this.getRate();
  },
  props: ["id"],
  methods: {
    getRate() {
      this.loading = true;
      this.$ajax
        .getData("adm/order/getDetail", {id: this.id})
        .then((data) => {
          this.loading = false;
          this.detailObj = data.resData
        })
        .catch((error) => {
          this.loading = false;
          this.$message({
            message: error.codeDes || error.message,
            type: "error",
          });
        });
    },
  },
}
</script>

<style scoped>
img {
  width: 100px;
  height: 100px;
}
</style>